<template>
  <div class="yz_footer">
    <div class="footer_introduce">
      <div class="introduce_container clearfix">
        <div class="left_side">
          <h4>公司简介</h4>
          <p>装饰有限公司成立于1997年，是以家装为主，涉足商装、建材等相关产业的专业性装饰公司。具有施工、设计双乙级资质。通过多年的努力，在业内外形....</p>
          <p class="to_more">
            <a href="javascript:void(0);" @click="toMore">查看更多<i class="el-icon-d-arrow-right"></i></a>
          </p>
        </div>
        <div class="right_side">
          <h4>联系我们</h4>
          <ul class='contact'>
            <li>
              <i class="el-icon-location-outline"></i>
              <span>上海市东方路788号</span>
            </li>
            <li>
              <i class="el-icon-phone-outline"></i>
              <span>86-33333333</span>
            </li>
            <li>
              <i class="el-icon-message"></i>
              <span>123456789@163.com</span>
            </li>
            <li>
              <i class="el-icon-info"></i>
              <span>www.spademo.com</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="blogroll">
        <div class="links">
          <ul class="clearfix">
            <li>友情链接：</li>
            <li><a href="#">中国建筑网</a></li>
            <li><a href="#">中国建筑网</a></li>
            <li><a href="#">中国建筑网</a></li>
            <li><a href="#">中国建筑网</a></li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <div class="copy_container">
        	<p>装饰公司 版权所有 2008-2012 湘ICP备8888888</p>
        	<p>电话：0731-12345678 12345678 QQ:88888888 999999 Email:admin@admin.com</p>
        	<p>Powered by MetInfo 5.3.19</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  },
  computed: {
    activeIndex(){
      return this.$store.state.activeIndex
    }
  },
  methods:{
    toMore(){
      this.$store.state.activeIndex="/page/about/about1";
      this.$router.push("/page/about/about1");
    }
  },
  mounted(){
    
  }
}

</script>
<style lang='scss'>
@mixin h4Style {
  color: #fff;
  margin: 0 0 17px;
  padding-bottom: 15px;
  font-size: 18px;
  margin-top: 0px;
  text-shadow: none;
  position: relative;
  &::after {
    content: '';
    width: 45px;
    height: 2px;
    background: #d68b37;
    position: absolute;
    bottom: 0px;
    left: 0;
  }
}
.yz_footer {
  width: 100%;
  .footer_introduce {
    padding-top: 40px;
    background-color: #32373C;
    .introduce_container {
      @include maxWidthMargin0;
      .left_side {
        float: left;
        width: 75%;
        padding:0 50px 0 20px;
        h4 {
          @include h4Style;
        }
        p {
          text-indent: 2em;
          color: #aaa;
          margin: 11px 0;
        }
        .to_more {
          text-indent: 0;
        }
      }
      .right_side {
        float: left;
        width: 25%;
        h4 {
          @include h4Style;
        }
        .contact {
          li {
            font-size: 14px;
            line-height: 26px;
            margin-bottom: 18px;
            width: 100%;
            float: left;
            color: #aaaaaa;
            i {
              font-size: 25px;
              margin-right: 10px;
              color: #d68b37;
              float: left;
            }
          }
        }
      }
    }
    .blogroll {
      padding: 15px 0px 0px 0px;
      color: #aaaaaa;
      background: #282d32;
      .links {
        @include maxWidthMargin0;
        ul {
          width: 100%;
          text-align: center;
          li {
            display: inline-block;
          }
          &>li+li::before {
            content: "/\00a0";
            padding: 0 5px;
          }
        }
      }
    }
  }
  .copyright {
    padding: 20px 0px 20px 0px;
    color: #aaaaaa;
    background: #282d32;
    .copy_container {
      @include maxWidthMargin0;
      p{
      	text-align:center;
      }
    }
  }
}

</style>
